
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮滑动开关</title>
	<style type="text/css">
		.switch_on {
        font-size: 30px;
        width: 50px;
        height: 60px;
        line-height: 60px;
        }

        .switch_on span,.switch_on input {
        width: 50px;
        height: 60px;
        position: absolute;
        background: none;
        -webkit-appearance: none;
        }

        .switch_on span.input.checked:before {
        border-color: #64bd63;
        box-shadow: #64bd63 0px 0px 0px 16px inset;
        background-color: #64bd63;
        transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
        }

        .switch_on span.input:before {
        content: '';
        width: 50px;
        height: 30px;
        border-radius: 20px;
        display: inline-block;
        position: absolute;
        top: 12.5px;
        left: 0;
        border: 1px solid red;
        box-shadow: red 0px 0px 0px 16px inset;
        background-color: red;
        transition: border 0.4s, box-shadow 0.4s;
        background-clip: content-box;
        }


        .switch_on span.input.checked:after {
        left: 30px;
        }  

        .switch_on span.input:after {
        content: '';
        width: 30px;
        height: 30px;
        position: absolute;
        top: 12.5px;
        left: 0;  
        border-radius: 100%;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        transition: left 0.2s;  
        }
	</style>
</head>
<body>
    <label class="switch_on" id="switch_btn">
        <input type="checkbox" checked="checked">
        <span class="input checked"></span>
    </label>
	<script type="text/javascript">
        document.getElementById("switch_btn").onclick = function () {

        if (this.children[0].checked == true) {

             this.children[1].className = "input checked"

            } else {

                  this.children[1].className = "input"

            }

        }
	</script>
</body>
</html>
